<template>
  <div class="common-layout">
    <el-container>
      <el-header>
        <div class="demo-type">
          <div>
            <el-avatar>
              <el-row class="block-col-2">
                <el-col :span="8">
                  <el-dropdown>
                    <span class="el-dropdown-link"> user </span>
                    <template #dropdown>
                      <el-dropdown-menu>
                        <el-dropdown-item :icon="'Plus'"
                          >Action 1</el-dropdown-item
                        >
                        <el-dropdown-item :icon="'CirclePlusFilled'">
                          Action 2
                        </el-dropdown-item>
                        <el-dropdown-item :icon="'CirclePlus'"
                          >Action 3</el-dropdown-item
                        >
                        <el-dropdown-item :icon="'Check'"
                          >Action 4</el-dropdown-item
                        >
                        <el-dropdown-item :icon="'CircleCheck'"
                          >Action 5</el-dropdown-item
                        >
                      </el-dropdown-menu>
                    </template>
                  </el-dropdown>
                </el-col>
              </el-row>
            </el-avatar>
          </div>
        </div>
      </el-header>
      <el-container>
        <el-aside :width="asidewidth">
          <el-menu
            active-text-color="#ffd04b"
            background-color="#545c64"
            text-color="#fff"
            default-active="2"
            class="el-menu-vertical-demo"
            :collapse="isCollapse"
            router
          >
            <el-menu-item @click="ShowMenu" index="/">
              <el-icon><document /></el-icon>
              <template #title>菜单</template>
            </el-menu-item>

            <mymenu :routeDate="resRouter" :isCollapse="isCollapse"></mymenu>
          </el-menu>
        </el-aside>
        <el-main>
          <router-view></router-view>
          <div style="margin: auto; width: 600px; padding-top: 500px">
            <div style="width: 600px; margin: left; padding: 20px 0">
              <a
                href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=35082502000138"
                target="_blank"
                style="
                  display: inline-block;
                  text-decoration: none;
                  height: 20px;
                  line-height: 20px;
                "
                ><img :src="png" style="float: left" />
                <div
                  style="
                    float: left;
                    height: 20px;
                    line-height: 20px;
                    margin: 0px 0px 0px 5px;
                    color: #939393;
                  "
                >
                  闽公网安备 35082502000138号
                </div>
              </a>
              <a
                href="https://beian.miit.gov.cn/"
                target="_blank"
                style="
                  display: inline-block;
                  text-decoration: none;
                  height: 20px;
                  line-height: 20px;
                "
              >
                <div
                  style="
                    float: left;
                    height: 20px;
                    line-height: 20px;
                    margin: 0px 0px 0px 5px;
                    color: #939393;
                  "
                  
                >
                  闽ICP备2020020583号-1
                </div>
              </a>
            </div>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import { resRouter } from "../Routes/router";
import mymenu from "./mymenu.vue";
//引入备案图标
import  png from "../assets/备案图标 (1).png";


export default {
  setup() {},
  components: {
    mymenu,
  },
  data: () => {
    return {
      isCollapse: false,
      asidewidth: "200px",
      resRouter,
      png,
    };
  },
  methods: {
    // handleOpen(key, keyPath) {
    //   console.log(key, keyPath);
    // },
    // handleClose(key, keyPath) {
    //   console.log(key, keyPath);
    // },
    ShowMenu() {
      this.isCollapse = !this.isCollapse;
      var IscollapseValue = this.isCollapse;
      if (IscollapseValue) {
        setTimeout(() => {
          this.asidewidth = "64px";
        }, 300);
      } else {
        this.asidewidth = "200px";
      }
    },
  },
};
</script>


<style scoped>
.common-layout .el-container {
  height: 100vh;
}

.common-layout .el-header {
  background-color: #b3c0d1;
  color: var(--el-text-color-primary);
  text-align: center;
  line-height: 60px;
}

.common-layout .el-aside {
  background-color: #d3dce6;
  color: var(--el-text-color-primary);
  text-align: center;
  height: 100%;
  position: relative;
  overflow: auto;
}

.common-layout .el-main {
  background-color: #e9eef3;
  color: var(--el-text-color-primary);
  text-align: center;
}

.common-layout .el-container:nth-child(5) .el-aside,
.common-layout .el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.common-layout .el-container:nth-child(7) .el-aside {
  line-height: 320px;
}

.el-aside:is(.el-menu--collapse) {
  min-height: 100%;
  max-height: 100%;
}

.demo-type {
  display: flex;
  float: right;
}
.demo-type > div {
  flex: 1;
  text-align: center;
}

.demo-type > div:not(:last-child) {
  border-right: 1px solid var(--el-border-color-base);
}
</style>

<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 100%;
  max-height: 100%;
}

.el-menu-vertical-demo:is(.el-menu--collapse) {
  min-height: 100%;
  max-height: 100%;
}

.block-col-2 .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}

.el-dropdown-link {
  line-height: 60px;
}
</style>